<template>
  <div>
    <div style="padding: 5px 0" class="order">
      <el-card class="box-card">
        <template #header>
          <el-menu :default-active="selectNav" mode="horizontal" :router="true" text-color="black"
            active-text-color="red" @select="(index) => $router.push(index)">
            <el-menu-item index="/manage/order/all">全部订单</el-menu-item>
            <el-menu-item index="/manage/order/unPay"><el-badge
              :value="countMap.未支付">未支付订单</el-badge></el-menu-item>
            <el-menu-item index="/manage/order/preDelivery"><el-badge
                :value="countMap.待发货">待发货</el-badge></el-menu-item>
            <el-menu-item index="/manage/order/delivery">已发货</el-menu-item>
            <el-menu-item index="/manage/order/preReceive">待收货</el-menu-item>
            <el-menu-item index="/manage/order/received">已完成</el-menu-item>
            <el-menu-item index="/manage/order/preReturn"><el-badge
                :value="countMap.申请退货">申请退货</el-badge></el-menu-item>
            <el-menu-item index="/manage/order/return">退货单</el-menu-item>
          </el-menu>
        </template>
        <router-view />
      </el-card>
    </div>
  </div>
</template>

<script>
import { sOrderCount } from "../../api/sOrder";

export default {
  name: "Order",
  data() {
    return {
      countMap: {}
    };
  },
  created() {
    this.load()
    // this.$router.replace('/manage/order/all')
  },
  computed: {
    selectNav() {
      const path = this.$route.path
      return path
    }
  },
  methods: {
    // 主函数
    async load() {
      const { data: countMap } = await sOrderCount()
      this.countMap = countMap
    },
  }
};
</script>

<style scoped></style>
